<template>
  <el-dialog
    append-to-body
    title="维护映射"
    :visible.sync="own_dialogFormVisible"
    @close="closeConfigBox"
    class="map-list"
  >
    <div class="map-title">
      <span>源对象名称：{{ currentMapItem.syncObject }}</span>
      <span>目标模型名称：{{ currentMapItem.targetModelName }}</span>
    </div>
    <div class="map-main">
      <el-table
        ref="sourceTable"
        :data="sourceFields"
        height="448"
        border
        size="medium"
        highlight-current-row
        @row-click="selectSourceField"
        :cell-style="{ color: '#333333' }"
        :header-cell-style="{ background: '#F3F4F7', color: '#000000' }"
      >
        <el-table-column label="源字段" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.sourceField }}</span>
            <span
              >&nbsp;<strong>[</strong>&nbsp;{{ scope.row.type }}&nbsp;<strong
                >]</strong
              ></span
            >
          </template>
        </el-table-column>
      </el-table>
      <el-table
        ref="targetTable"
        :data="targetFields"
        height="448"
        border
        size="medium"
        highlight-current-row
        @row-click="selectTargetField"
        class="target-table"
        :cell-style="{ color: '#333333' }"
        :header-cell-style="{ background: '#F3F4F7', color: '#000000' }"
      >
        <el-table-column label="目标字段" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.targetField }}</span>
            <span
              >&nbsp;<strong>[</strong>&nbsp;{{ scope.row.type }}&nbsp;<strong
                >]</strong
              ></span
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="transfer-btns-wrapper">
        <div class="transfer-btns">
          <div>
            <el-button
              icon="el-icon-right"
              type="primary"
              @click="forwardTransfer"
              size="small"
              class="transfer-btn"
            ></el-button>
          </div>
          <div>
            <el-button
              icon="el-icon-back"
              type="primary"
              @click="reverseTransfer"
              size="small"
              class="transfer-btn"
            ></el-button>
          </div>
        </div>
      </div>
      <el-table
        ref="mapTable"
        :data="mapFields"
        height="448"
        border
        size="medium"
        highlight-current-row
        @row-click="selectMapField"
        :cell-style="{ color: '#333333' }"
        :header-cell-style="{ background: '#F3F4F7', color: '#000000' }"
      >
        <el-table-column label="映射结果" show-overflow-tooltip>
          <template slot-scope="scope">
            <div>
              <span>{{ scope.row.sourceField }}</span>
              <span
                >&nbsp;<strong>[</strong>&nbsp;{{
                  scope.row.sourceType
                }}&nbsp;<strong>]</strong></span
              >
              ->
              <span>{{ scope.row.targetField }}</span>
              <span
                >&nbsp;<strong>[</strong>&nbsp;{{
                  scope.row.targetType
                }}&nbsp;<strong>]</strong></span
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="map-btns-wrapper">
      <div class="map-btns">
        <el-button @click="closeConfigBox">取消</el-button>
        <el-button type="primary" @click="saveEdit">保存</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { deepClone } from "@/plugins/utils";
export default {
  props: {
    innerVisible: {
      type: Boolean,
      default: false,
    },
    currentMapItem: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      own_dialogFormVisible: false,
      origin_sourceFields: [],
      origin_targetFields: [],
      origin_mapFields: [],
      sourceFields: [], // 源字段列表
      targetFields: [], // 目标字段列表
      mapFields: [], // 映射字段列表
      selectedSourceField: null, // 选择源字段
      selectedTargetField: null, // 选择目标字段
      selectedMapField: null, // 选中映射结果字段项
    };
  },
  mounted() {
    // this.getMapList();
  },
  methods: {
    closeConfigBox() {
      this.$emit("closeConfigBox");
      // this.reset();
    },
    // 保存映射修改
    saveEdit() {
      let { mapFields, sourceFields, targetFields } = this;
      this.$emit("saveMap", {
        mappingTableId: this.currentMapItem.mappingTableId,
        mapFields,
        sourceFields,
        targetFields,
      });
      this.$emit("closeConfigBox");
    },
    // 取消映射修改
    reset() {
      this.sourceFields = deepClone(this.origin_sourceFields);
      this.targetFields = deepClone(this.origin_targetFields);
      this.mapFields = deepClone(this.origin_mapFields);
      this.selectedSourceField = null;
      this.selectedSourceField = null;
      this.selectedMapField = null;
    },
    // 选中源字段
    selectSourceField(row) {
      // console.log("selectSourceField", row);
      this.selectedSourceField = row;
    },
    // 选中目标字段
    selectTargetField(row) {
      // console.log("selectTargetField", row);
      this.selectedTargetField = row;
    },
    // 选中映射结果
    selectMapField(row) {
      // console.log("selectMapField", row);
      this.selectedMapField = row;
    },
    // 正向映射
    forwardTransfer() {
      // console.log("正向映射");
      // console.log("selectedSourceField,", this.selectedSourceField);
      // console.log("selectedTargetField,", this.selectedTargetField);
      this.validateField(
        this.selectedSourceField,
        this.selectedTargetField
      ).then((res) => {
        if (res) {
          let _mapField = {
            sourceComment: this.selectedSourceField.comment,
            targetComment: this.selectedTargetField.comment,
            sourceField: this.selectedSourceField.sourceField,
            targetField: this.selectedTargetField.targetField,
            sourceType: this.selectedSourceField.type,
            targetType: this.selectedTargetField.type,
          };
          let sourceIndex = this.sourceFields.findIndex(
            (source) =>
              source.sourceField === this.selectedSourceField.sourceField
          );
          let targetIndex = this.targetFields.findIndex(
            (target) =>
              target.targetField === this.selectedTargetField.targetField
          );
          this.sourceFields.splice(sourceIndex, 1);
          this.targetFields.splice(targetIndex, 1);
          this.mapFields.push(_mapField);
          this.$refs.mapTable.setCurrentRow(_mapField);
          this.$refs.sourceTable.setCurrentRow();
          this.$refs.targetTable.setCurrentRow();
          this.selectedTargetField = null;
          this.selectedSourceField = null;
          this.selectedMapField = _mapField;
          // console.log("_mapField", _mapField);
        }
      });
    },
    // 撤销映射
    reverseTransfer() {
      if (!this.selectedMapField) {
        this.$message.warning("请选择想要撤销的映射结果项！");
        return;
      }
      let {
        sourceComment,
        sourceField,
        sourceType,
        targetComment,
        targetField,
        targetType,
      } = this.selectedMapField;
      let _sourceField = {
        comment: sourceComment,
        type: sourceType,
        sourceField: sourceField,
      };
      let _targetField = {
        comment: targetComment,
        type: targetType,
        targetField: targetField,
      };
      let mapIndex = this.mapFields.findIndex(
        (map) =>
          map.sourceField === this.selectedMapField.sourceField &&
          map.targetField === this.selectedMapField.targetField
      );
      this.mapFields.splice(mapIndex, 1);
      this.sourceFields.push(_sourceField);
      this.targetFields.push(_targetField);
      this.$refs.sourceTable.setCurrentRow(_sourceField);
      this.$refs.targetTable.setCurrentRow(_targetField);
      this.$refs.mapTable.setCurrentRow();
      this.selectedTargetField = _targetField;
      this.selectedSourceField = _sourceField;
      this.selectedMapField = null;
    },
    // 校验正向映射字段
    validateField(sourceField, targetField) {
      let message = null;
      if (sourceField && targetField) {
        if (sourceField.type !== targetField.type) {
          message =
            "源字段和目标字段类型不同，可能会导致映射不成功，是否继续？";
        }
        if (message) {
          return this.$confirm(message, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          });
        }
      } else {
        if (!sourceField && !targetField) {
          message = "请选择一个源字段和一个目标字段进行映射";
        } else if (!sourceField) {
          message = "请选择一个源字段";
        } else {
          message = "请选择一个目标字段";
        }
        this.$message.warning(message);
        return Promise.resolve(false);
      }
      return Promise.resolve(true);
    },
  },
  watch: {
    innerVisible: {
      handler: function (val) {
        this.own_dialogFormVisible = val;
      },
      immediate: true,
    },
    currentMapItem: {
      handler: function () {
        let { sourceList, targetList, mapList } = this.currentMapItem;
        this.sourceFields = sourceList ? deepClone(sourceList) : [];
        this.targetFields = targetList ? deepClone(targetList) : [];
        this.mapFields = mapList ? deepClone(mapList) : [];
        this.origin_sourceFields = sourceList;
        this.origin_targetFields = targetList;
        this.origin_mapFields = mapList;
        return;
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.map-list.el-dialog__wrapper {
  /deep/.el-dialog {
    width: 60%;
    min-width: 1050px;
    margin-top: 18vh !important;
    .el-dialog__body {
      height: 550px;
      .map-title {
        // background: #f3f4f7;
        background: #dcdfe6;
        padding: 2px;

        span {
          display: inline-block;
          margin: 0 20px 0 5px;
          color: "#000";
        }
      }
    }
  }
}
.map-main {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 480px;
  .el-table {
    cursor: pointer;
  }
}
.map-btns-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  .map-btns {
    width: 200px;
    display: flex;
    justify-content: space-around;
  }
}
.transfer-btns-wrapper {
  width: 46px;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  .transfer-btns {
    height: 400px;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    z-index: 1;
    position: relative;
    left: 2px;
  }
}
.transfer-btn {
  padding: 5px 10px;
  font-size: 20px;
}
.target-table {
  position: relative;
  left: -1px;
}
@media screen and (max-height: 800px) {
  .map-list.el-dialog__wrapper {
    /deep/.el-dialog {
      margin-top: 55px !important;
    }
  }
}
@media screen and (max-width: 1440px) {
  .map-list.el-dialog__wrapper {
    /deep/.el-dialog {
      width: 75%;
    }
  }
}
</style>
